<template>
  <div>
    <panel-head :route="route" />

    <el-table :data="tabData.list" style="width: 100%">
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="昵称" />
      <el-table-column prop="permissions_id" label="所属组别">
        <template #default="scope">
          {{ permissionsName(scope.row.permissions_id) }}
        </template>
      </el-table-column>

      <el-table-column prop="mobile" label="手机号" />

      <el-table-column prop="active" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.active ? 'success' : 'danger'">{{ scope.row.active ? '正常' : '失效' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="create_time" label="创建时间">
        <template #default="scope">
          <div class="flex-box">
            <el-icon><Clock /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="open(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-info">
      <el-pagination
        v-model:current-page="paginationData.pageNum"
        :page-size="paginationData.pageSize"
        :background="false"
        size="small"
        layout="->, total, prev, pager, next"
        :total="tabData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      v-model="dialogFormVisible"
      title="编辑用户"
      :before-close="beforeClose"
      width="500"
    >
      <el-form
        ref="formRef"
        label-width="100px"
        label-position="left"
        :model="form"
        :rules="rules"
      >

        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" disabled />
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="菜单权限" prop="permissions_id">
          <el-select v-model="form.permissions_id" placeholder="请选择菜单权限" style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm(formRef)">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { authAdmin, menuSelectlist, updateUser } from '../../../api'
import { ref, reactive, onMounted, nextTick } from 'vue'
import dayjs from 'dayjs'
import { Clock } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const tabData = reactive({
  list: [],
  total: 0
})

const options = ref([])

const paginationData = reactive({
  pageNum: 1,
  pageSize: 10
})

onMounted(() => {
  getListData()
  // 权限下拉列表
  menuSelectlist({}).then(({ data }) => {
    if (data.code === 10000) {
      console.log(data)
      options.value = data.data
    }
  })
})

// 请求列表数据
const getListData = () => {
  // 账号列表
  authAdmin(paginationData).then(({ data }) => {
    if (data.code === 10000) {
      console.log(data)
      const { list, total } = data.data
      console.log(list)
      list.forEach(item => {
        item.create_time = dayjs(item.create_time).format('YYYY-MM-DD')
      })
      tabData.list = list
      tabData.total = total
    }
  })
}

// 点击页码
// eslint-disable-next-line no-unused-vars
const handleSizeChange = (val) => {
  paginationData.pageNum = val
  getListData()
}

// 选择页面
// eslint-disable-next-line no-unused-vars
const handleCurrentChange = (val) => {
  paginationData.pageSize = val
  getListData()
}

// eslint-disable-next-line no-unused-vars
const open = (rowData = {}) => {
  dialogFormVisible.value = true
  // form弹窗打开生成是异步的
  nextTick(() => {
    if (rowData) {
      console.log(rowData)
      // nextTick不能直接赋值，需要使用浅拷贝
      Object.assign(form, { mobile: rowData.mobile, permissions_id: rowData.permissions_id, name: rowData.name })
    }
  })
}

const formRef = ref()

// form表单数据
const form = reactive({
  mobile: '',
  name: '',
  permissions_id: ''
})

// 表单校验
// eslint-disable-next-line no-unused-vars
const rules = reactive({
  name: [{ required: true, trigger: 'blur', message: '请填写名称' }],
  permissions_id: [{ required: true, trigger: 'blur', message: '请选择菜单权限' }]
})

// 控制弹窗的显示
const dialogFormVisible = ref(false)

// 关闭弹窗在回调
const beforeClose = () => {
  dialogFormVisible.value = false
  // 重置表单数据
  formRef.value.resetFields()
}

// 表单提交
// eslint-disable-next-line no-unused-vars
const confirm = async(formEl) => {
  if (!formEl) return
  // 手动触发校验
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateUser({ name: form.name, permissions_id: form.permissions_id }).then(({ data }) => {
        if (data.code === 10000) {
          console.log(data)
        }
        beforeClose()
        getListData()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 根据权限id匹配权限名称
const permissionsName = (id) => {
  const data = options.value.find(el => el.id === id)
  return data ? data.name : '超级管理员'
}

</script>

<style lang="less" scoped>
.flex-box{
    display: flex;
    align-items: center;
    height: 100%;
}

</style>
